<template>
  <view class="tab-page group">
    <view class="nav-bar">
<!--      <uni-icons class="btn-side left" type="back" size="24" @click="onNavBack()"></uni-icons>-->
      <view class="nav-search">
        帖子详情
      </view>
    </view>
    <scroll-view @scroll="onPageScroll()" class="scroll-bar" @scrolltolower="loadMore()" scroll-with-animation="true"
                 scroll-y="true">

      <view class="group-items">

        <view class="friendsCircle-content-item">
          <head-image :name="moment.creator?.nickName" :url="moment.creator?.headImageThumb" :size="90"
                      @click="gofriend(moment.creator)">
          </head-image>

          <view class="friendsCircle-content-right">
            <view class="friendsCircle-content-nickName">{{ moment.creator?.nickName }}</view>
            <view class="friendsCircle-content-text">{{ moment.content?.content }}</view>
            <view class="friendsCircle-content-video" v-if="moment.topicType=='VIDEO' && moment.content.files.length>0">
              <n-video :src="moment.content.files[0].url" class="friendsCircle-content-video-img"></n-video>
            </view>

            <view v-if="moment.topicType=='IMAGE'" class="friendsCircle-content-imgs">
              <image v-for="(item, ii) in moment.content.files" :key="ii" class="friendsCircle-content-img"
                     :class="'fci' + moment.content.files.length" :src="item.thumbUrl" mode="aspectFill"
                     @click="pimgs(moment.content.files, ii)"></image>
            </view>

          </view>
        </view>
        <view class="comment-items">
          <hb-comment ref="hbComment" @add="add" @del="del" @like="like" @focusOn="focusOn" :deleteTip="'确认删除？'"
                      :cmData="commentData" v-if="commentData"></hb-comment>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>

import MomentListItem from "../../components/moment-list-item/moment-list-item.vue";
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import http from '../../common/request';
import HeadImage from "@/components/head-image/head-image.vue";
import HbComment from "@/uni_modules/hb-comment/components/hb-comment/hb-comment.vue";
import nVideo from "@/components/n-video/n-video.vue";

export default {
  components: {nVideo, HbComment, HeadImage, UniIcons, MomentListItem},
  data() {
    return {
      loading: false,
      moment: {},
      result: {
        list: []
      },
    }
  },
  methods: {
    del(comment) {
      this.$http({
        url: `/comment`,
        method: 'DELETE',
        data:comment
      }).then(res => {
        if (comment.parentId == null) {
          this.result.total--
          const index = this.result.list.findIndex(item => item.id == comment.id);
          this.result.list.splice(index, 1);
        } else {
          // 删除子评论
          const index = this.result.list.findIndex(item => item.id == comment.parentId);
          const sonIndex = this.result.list[index].children.findIndex(item => item.id == comment.id);
          this.result.list[index].children.splice(sonIndex, 1);
        }
      });
    },
    like(commentId) {
      console.log(commentId)
    },
    add(data) {
      this.$http({
        url: `/comment/create`,
        method: 'POST',
        data: {"momentId": this.moment.id, ...data}
      }).then(res => {
        if (this.result.list == null) {
          this.result.list = []
        }
        if (res.parentId == null) {
          this.result.total++
          this.result.list.push(res);
        } else {
          const index = this.result.list.findIndex(item => item.id == res.parentId);
          if (!this.result.list[index].children) {
            this.result.list[index].children = []
          }
          this.result.list[index].children.push(res);
        }
        this.$refs.hbComment.closeInput()
      });
    },
    onPageScroll(e) {
      this.$refs['fcli'].hidenTool();
    },
    onNavBack() {
      uni.navigateBack({
        delta: 1 // 返回上一级页面
      });
    },
    onCircleInfo() {
      uni.navigateTo({
        url: "/pages/circle/circle-info?id=" + this.queryParams.circleId
      })
    },
    onCreateNewMoment() {
      uni.redirectTo({
        url: "/pages/moment/moment-add?circleId=" + this.queryParams.circleId
      })
    },

    getMoment(id) {
      this.loading = true
      http({
        url: `/moment/detail/${id}`,
        method: 'GET',
      }).then((res) => {
        this.moment = res
        this.loading = false
      }).catch(err => {
        console.log(err)
        this.loading = false
      })
    },
    getTree(data) {
      let result = [];
      let map = {};
      data.forEach(item => {
        map[item.id] = item;
      });
      data.forEach(item => {
        let parent = map[item.parentId];
        if (parent) {
          (parent.children || (parent.children = [])).push(item);
        } else {
          result.push(item);
        }
      });
      return result;
    },
    getCommentList(id) {
      this.loading = true
      http({
        url: `/comment/list/${id}`,
        method: 'GET',
      }).then((res) => {
        this.result = res
      }).catch(err => {
        console.log(err)
        this.loading = false
      })
    },

    loadMore() {
      if (!this.hasNextPage) {
        uni.showToast({
          title: `没有更多了`,
          icon: 'none',
          duration: 1500
        });
        return
      }
      this.queryParams.pageNum++
      this.queryParams.status = 'loading'
      http({
        url: '/moment/list',
        method: 'GET',
        data: this.queryParams
      }).then((res) => {
        this.momentList = this.momentList.concat(res.list)
        if (res.hasNextPage) {
          this.hasNextPage = true
        } else {
          this.hasNextPage = false
          uni.showToast({
            title: `没有更多了`,
            icon: 'none',
            duration: 1500
          });
        }
      })
    },
  },
  computed: {
    commentData() {
      if (!this.result) {
        return {
          commentSize: 0,
          comment: []
        };
      }
      return {
        commentSize: this.result.total || 0,
        comment: this.result.list || []
      };
    }
  },
  onLoad(options) {
    this.getMoment(options.id);
    this.getCommentList(options.id)
  },
}
</script>

<style lang="scss" scoped>
.btn {
  text-align: center;
  color: #fff;
  padding: 20rpx;
  margin: 50rpx;
  border-radius: 20rpx;
  background-color: #2979ff;
}

.btn-side {
  position: absolute;
  line-height: 60rpx;
  font-size: 28rpx;
  cursor: pointer;

  &.left {
    left: 30rpx;
  }

  &.right {
    right: 30rpx;
  }
}

.group {
  position: relative;
  display: flex;
  flex-direction: column;

  .nav-bar {
    margin-bottom: 10rpx;
    display: flex;
    align-items: center;
    background-color: white;

    .nav-search {
      padding: 15rpx;
      flex: 1;
      display: flex; /* 让 .nav-search 也成为一个 flex 容器 */
      justify-content: center; /* 水平居中对齐 */
      align-items: center; /* 垂直居中对齐 */
    }

    .btn-side {
      position: absolute;
      line-height: 60rpx;
      font-size: 28rpx;
      cursor: pointer;

      &.left {
        left: 30rpx;
      }

      &.right {
        right: 30rpx;
      }
    }
  }


  .nav-add {
    padding-right: 20rpx;
    line-height: 36px;
    cursor: pointer;
  }

  .group-tip {
    position: absolute;
    top: 400rpx;
    padding: 50rpx;
    text-align: left;
    line-height: 50rpx;
    color: #10AEFF;
    font-size: 30rpx;
  }

  .group-items {
    flex: 1;
    overflow: hidden;
    position: relative;
    background-color: white;

    .scroll-bar {
      height: 100%;
    }
  }

  .comment-items {
    padding: 0 20rpx 0 20rpx;
    flex: 1;
    overflow: hidden;
    position: relative;
    background-color: white;

    .scroll-bar {
      height: 100%;
    }
  }

  .friendsCircle-content-item {
    display: flex;
    flex-direction: row;
    padding: 24rpx 34rpx;
    border-bottom: 10rpx #F2F2F2 solid;
  }

  .friendsCircle-content-avatar {
    border-radius: 10rpx;
    width: 90rpx;
    height: 90rpx;
    min-width: 90rpx;
  }

  .friendsCircle-content-right {
    display: flex;
    flex-direction: column;
    padding-left: 18rpx;
    flex: 1;
    box-sizing: border-box;
  }

  .friendsCircle-content-nickName {
    font-size: 30rpx;
    font-weight: bold;
    color: #2782D7;
    margin-bottom: 10rpx;
  }

  .friendsCircle-content-text {
    font-size: 30rpx;
    color: #333;
  }

  .friendsCircle-content-imgs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1;
    margin-top: 24rpx;
  }

  .friendsCircle-content-img {
    max-width: 100%;
  }

  .friendsCircle-content-img.fci1 {
    height: 550rpx;
    max-width: 500rpx;
    margin-right: 5px;
  }

  .friendsCircle-content-img.fci2 {
    width: 185rpx;
    height: 185rpx;
    margin-right: 5rpx;
    margin-bottom: 5rpx;
  }

  .friendsCircle-content-img.fci2:nth-child(3n) {
    margin-right: 0;
  }

  .friendsCircle-content-img.fci3 {
    width: 185rpx;
    height: 185rpx;
    margin-right: 5rpx;
    margin-bottom: 5rpx;
  }

  .friendsCircle-content-img.fci3:nth-child(3n) {
    margin-right: 0;
  }

  .friendsCircle-content-img.fci4 {
    width: 185rpx;
    height: 185rpx;
    margin-right: 5rpx;
    margin-bottom: 5rpx;
  }

  .friendsCircle-content-img.fci4:nth-child(2n) {
    margin-right: 185rpx;
  }

  .friendsCircle-content-img.fci5 {
    width: 185rpx;
    height: 185rpx;
    margin-right: 5rpx;
    margin-bottom: 5rpx;
  }

  .friendsCircle-content-img.fci5:nth-child(3n) {
    margin-right: 0;
  }

  .friendsCircle-content-img.fci6 {
    width: 185rpx;
    height: 185rpx;
    margin-right: 5rpx;
    margin-bottom: 5rpx;
  }

  .friendsCircle-content-img.fci6:nth-child(3n) {
    margin-right: 0;
  }

  .friendsCircle-content-img.fci7 {
    width: 185rpx;
    height: 185rpx;
    margin-right: 5rpx;
    margin-bottom: 5rpx;
  }

  .friendsCircle-content-img.fci7:nth-child(3n) {
    margin-right: 0;
  }

  .friendsCircle-content-img.fci8 {
    width: 185rpx;
    height: 185rpx;
    margin-right: 5rpx;
    margin-bottom: 5rpx;
  }

  .friendsCircle-content-img.fci8:nth-child(3n) {
    margin-right: 0;
  }

  .friendsCircle-content-img.fci9 {
    width: 185rpx;
    height: 185rpx;
    margin-right: 5rpx;
    margin-bottom: 5rpx;
  }

  .friendsCircle-content-img.fci9:nth-child(3n) {
    margin-right: 0;
  }

  .friendsCircle-content-location {
    font-size: 24rpx;
    color: #5F698C;
    margin-top: 12rpx;
  }

  .friendsCircle-content-time {
    font-size: 24rpx;
    color: #666666;
    margin-right: auto;
  }

  .friendsCircle-comment {
    background-color: #F7F7F7;
    border-radius: 8rpx;
  }

  .friendsCircle-comment-item {
    line-height: 40rpx;
    font-size: 28rpx;
    padding: 12rpx;
    white-space: pre-wrap;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .friendsCircle-comment-feedback {
    display: inline-block;
  }

  .friendsCircle-content-video {
    width: auto;
    max-width: 400rpx;
    position: relative;
    margin-top: 24rpx;
  }

  .friendsCircle-content-video-img {
    min-width: 200rpx;
    max-width: 400rpx;
    height: 300rpx;
    border: 8rpx solid #ebebf5;
    cursor: pointer;
  }

  .friendsCircle-content-video-icon {
    z-index: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 80rpx !important;
    height: 80rpx !important;
    transform: translate(-50%, -50%);
  }

  .friendsCircle-comment-content {
  }

  .friendsCircle-comment-content text {
    word-break: break-all;
  }
}

</style>